<template>
  <div class="wx-auth">
    <!-- 微信绑定 -->
    <div class="btn">
      <Button block type="success"
        :disabled="userStore.userInfo.boolWechatOpenId"
        @click="handleAuth" class="primary"
        :loading="pageState.loading">
        {{ userStore.userInfo.boolWechatOpenId ? '已绑定' : '微信绑定' }}
      </Button>
    </div>

  </div>
</template>
<script setup lang="ts">
import { Button, showSuccessToast } from 'vant';
import { ref } from 'vue';

import useUserStore from '@/stores/user.store';

import { lunchWxAuth } from '../api';
import { RealAuthConfig } from '../models/RealAuth';

const userStore = useUserStore();
const pageState = ref({
  loading: false,
});

const params = ref<RealAuthConfig>(new RealAuthConfig());

const handleAuth = async () => {
  try {
    pageState.value.loading = true;
    const { data } = await lunchWxAuth(params.value);
    await userStore.fetchUserInfo();
    showSuccessToast(data.msg || '微信绑定成功');
  } catch (error) {
    //
  } finally {
    pageState.value.loading = false;
  }
};

</script>
<style lang="less" scoped>
.wx-auth {
  height: 100%;
  display: flex;
  flex-direction: column;

  .btn {
    flex-grow: 1;
    display: flex;
    padding: 0 16px;

    .primary {
      margin: 200px auto auto;
    }
  }
}
</style>
